<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>mobileSelect Demo</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="">  
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="../../css/public.css">

    <!-- 引入样式和js文件 -->
    <link rel="stylesheet" type="text/css" href="../../css/mobileSelect.css">
    <script src="../../js/jquery-1.7.2.js"></script>
    <script src="../../js/mobileSelect.js" type="text/javascript"></script>

</head>
<body>


<div class="contain">
    <div class="fixWidth">
        <div class="nav">
            <h1>mobileSelect Demo</h1>
        </div>
        <div class="demo">
            <div id="trigger5">车型选择-级联</div>
        </div>
    </div>

</div>



<script type="text/javascript">


//var weekdayArr=['周日','周一','周二','周三','周四','周五','周六'];
//var timeArr = ['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00'];
//var numArr=['1','2','3','4','5'];

var UplinkData ='';
$.getJSON("../../region.json",function(data){ 
	UplinkData=data.districtList[0].districtList;
	console.log(UplinkData)
	var mobileSelect5 = new MobileSelect({
	    trigger: '#trigger5',
	    title: '车型选择',
	    wheels: [
	                {data : UplinkData}
	            ],
	    transitionEnd:function(indexArr, data){
	        console.log(data);
	    },
	    callback:function(indexArr, data){
	        console.log(data);
	    },
	    position:[33,7],
	});
});
//----------------------------------------------------------

/**
 * 参数说明
 * @param trigger(必填参数) 触发对象的id/class/tag
 * @param wheels(必填参数)  数据源,需要显示的数据
 * @param title 控件标题
 * @param position 初始化定位
 * @param callback 选择成功后触发的回调函数，返回indexArr(选中的选项索引)、data(选中的数据)
 * @param transitionEnd 每一次手势滑动结束后触发的回调函数,返回indexArr(当前选中的选项索引)、data(选中的数据)
 */

/**
 * 函数说明(实例化之后才可用,用于更改数据而又不用重新实例化) 使用demo可查看文档 https://github.com/onlyhom/mobileSelect.js
 * @function setTitle()      参数 string                 设置控件的标题
 * @function updateWheel()   参数 sliderIndex, data      重新渲染指定的轮子
 * @function locatePostion() 参数 sliderIndex, posIndex  传入位置数组，重定位轮子的位置
 */
 

//var mobileSelect1 = new MobileSelect({
//  trigger: '#trigger1', 
//  title: '单项选择',  
//  wheels: [
//              {data: weekdayArr}
//          ],
//  position:[2], //初始化定位 打开时默认选中的哪个  如果不填默认为0
//  transitionEnd:function(indexArr, data){
//      console.log(data);
//  },
//  callback:function(indexArr, data){
//      console.log(data);
//  }
//});


//var mobileSelect2 = new MobileSelect({
//  trigger: '#trigger2',
//  title: '双项选择',
//  wheels: [
//              {data: weekdayArr},
//              {data: timeArr}
//          ],
//  position:[1, 2],
//  transitionEnd:function(indexArr, data){
//      console.log(data);
//  },
//  callback:function(indexArr, data){
//      console.log(data);
//  }
//});


//var mobileSelect3 = new MobileSelect({
//  trigger: '#trigger3',
//  title: '多项选择',
//  wheels: [
//              {data: numArr},
//              {data: numArr},
//              {data: numArr},
//              {data: numArr},
//              {data: numArr}
//          ],
//  position:[0, 1, 0, 1, 0], 
//  transitionEnd:function(indexArr, data){
//      console.log(data);
//  },
//  callback:function(indexArr, data){
//      console.log(data);
//  }
//});


//var mobileSelect4 = new MobileSelect({
//  trigger: '#trigger4',
//  title: '地区选择',
//  wheels: [
//              {data:[
//                  {
//                      id:'1',
//                      value:'附近',
//                      childs:[
//                          {id:'1',value:'1000米'},
//                          {id:'2',value:'2000米'},
//                          {id:'3',value:'3000米'},
//                          {id:'4',value:'5000米'},
//                          {id:'5',value:'10000米'}
//                      ]
//                  },
//                  {id:'2',value:'上城区'},
//                  {id:'3',value:'下城区'},
//                  {id:'4',value:'江干区'},
//                  {id:'5',value:'拱墅区'},
//                  {id:'6',value:'西湖区'}
//              ]}
//          ],  
//  transitionEnd:function(indexArr, data){
//      console.log(data);
//  },
//  callback:function(indexArr, data){
//      console.log(data);
//  }  
//});





</script>




</body>
</html>